import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';

// 1. colorSlice
interface ColorState {
  bgColor: string; // 背景颜色的类型
}

const initialColorState: ColorState = {
  bgColor: '#ffffff', // 默认背景颜色
};

const colorSlice = createSlice({
  name: 'color',
  initialState: initialColorState,
  reducers: {
    setBgColor: (state, action: PayloadAction<string>) => {
      state.bgColor = action.payload; // 更新背景颜色
    },
  },
});

// 2. imageSlice
interface ImageState {
  selectedImages: string[]; // 选择的图像
}

const initialImageState: ImageState = {
  selectedImages: [],
};

const imageSlice = createSlice({
  name: 'images',
  initialState: initialImageState,
  reducers: {
    addImage: (state, action: PayloadAction<string>) => {
      state.selectedImages.push(action.payload); // 添加图像
    },
  },
});

// 3. itemsSlice
interface Item {
  id: number;
  // 添加其他需要的字段
}

interface ItemsState {
  items: Item[];
  selectedItemId: number | null;
  selectedItemFontSize: number;
  selectedItemColor: string;
  selectedItemBold: boolean;
}

const initialState: State = {
  items: [],
  selectedItemId: null,
  selectedItemFontSize: 16,
  selectedItemColor: 'black',
  selectedItemBold: false,
};
const itemsSlice = createSlice({
  name: 'items', // Slice的名称，用于区分不同的slice
  initialState: initialState, // 初始状态，这里使用空数组表示初始时没有items
  reducers: {
    // 定义一个添加项的action
    addItem: (state, action: PayloadAction<Omit<Item, 'id'>>) => {
      // 向状态中添加一个新的项，赋予唯一的ID和其他属性
      state.items.push({ ...action.payload, id: Date.now()});
      console.log(action,3333)
      
    },
    // 定义一个更新项的action
    updateItem: (state, action: PayloadAction<Item>) => {
      // 找到需要更新的项的索引
      const index = state.items.findIndex((item) => item.id === action.payload.id);
      if (index !== -1) {
        // 更新项的属性
        state.items[index] = {  ...state.items[index],  ...action.payload };
      }
    },
    setSelectedItemId: (state, action) => {
      state.selectedItemId = action.payload;
      console.log(state,action,'2222')
    },
    setSelectedItemFontSize: (state, action) => {
      state.selectedItemFontSize = action.payload;
    },
    setSelectedItemColor: (state, action) => {
      state.selectedItemColor = action.payload;
    },
    setSelectedItemBold: (state, action) => {
      state.selectedItemBold = action.payload;
    },
    updateList:(state,action)=>{
      
    },
      updateCanvasState: (state, action: PayloadAction<any>) => {
      state.items = action.payload.items;
      // 同样更新背景色、选择的图像等
    },
  },
});

// 4. 创建 Redux 存储
export const { setBgColor } = colorSlice.actions;
export const { addImage, } = imageSlice.actions;
export const {
  addItem,
  updateItem,
  setSelectedItemId,
  setSelectedItemFontSize,
  setSelectedItemColor,
  setSelectedItemBold,
  updateCanvasState 
} = itemsSlice.actions;

// 使用configureStore创建Redux store
export const store = configureStore({
  reducer: {
    color: colorSlice.reducer,
    images: imageSlice.reducer,
    items: itemsSlice.reducer,
  },
});

// 导出各个切片的默认 reducer
export default {
  color: colorSlice.reducer,
  images: imageSlice.reducer,
  items: itemsSlice.reducer,
};
